<template>
  <div id="bottom1" style="width:100%;height:100%;"></div>
</template>

<script>
//引入所需的图表
import { Column } from '@antv/g2plot';
import {get} from '@/utils/request';
export default {
  data(){
return{
  countData:[]
}
  },
  async mounted() {
    await this.getCountData()
    await this.initBot1()
  },
  methods: {
    //创建图表
    initBot1() {
      const columnPlot = new Column('bottom1', {
        data:this.countData,
        xField: 'type',
        yField: 'sales',
        label: {
          // 可手动配置 label 数据标签位置
          position: 'middle', // 'top', 'bottom', 'middle',
          // 配置样式
          style: {
            fill: '#FFFFFF',
            opacity: 0.6,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
            style:{
              //文字颜色
              fill:'white'
            }
          },
        },
        yAxis: {
          label: {
            style:{
              //文字颜色
              fill:'white'
            }
          },
        },
        meta: {
          type: {
            alias: '类型',
          },
          sales: {
            alias: '数量',
          },
        },
      });

      columnPlot.render();
    },
   async getCountData(){
      let res=await get('/count/countAll')
      console.log(res.data);
      //对数据格式进行处理
      this.countData=res.data.map(item=>{
        return{
          type:item.type,
          sales:item.value
        }
      })
      //console.log(this.countData);
    }
  },
}
</script>

<style scoped></style>